<template>
  <el-dialog
    :title="!dataForm.attrId ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @close="close">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-width="120px">
      <el-form-item label="属性名" prop="attrName">
        <el-input v-model="dataForm.attrName" placeholder="属性名"></el-input>
      </el-form-item>
      <el-form-item label="是否需要检索" prop="searchType">
        <template slot-scope="scope">
          <el-switch
            v-model="dataForm.searchType"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </template>
      </el-form-item>
      <el-form-item label="值类型" prop="valueType">
        <el-switch
          v-model="dataForm.valueType"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
          active-text="可选多个值"
          inactive-text="只能选单个"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="属性图标" prop="icon">
        <el-input v-model="dataForm.icon" placeholder="属性图标"></el-input>
      </el-form-item>
      <el-form-item label="可选值列表" prop="valueSelect">
        <!--        <el-input v-model="dataForm.valueSelect" placeholder="可选值列表[用逗号分隔]"></el-input>-->
        <el-select
          v-model="valueSelect"
          multiple
          filterable
          allow-create
          default-first-option
          placeholder="请选择可选值">
        </el-select>
      </el-form-item>
      <el-form-item label="属性类型" prop="attrType">
        <template>
          <el-select v-model="dataForm.attrType" placeholder="请选择">
            <el-option
              v-for="item in attrTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item label="启用状态" prop="enable">
        <template slot-scope="scope">
          <el-switch
            v-model="dataForm.enable"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </template>
      </el-form-item>
      <el-form-item label="所属分类" prop="catelogId">
        <el-cascader
          v-model="cateIdValues"
          :options="cateOptions"
          :props="props"
          @change="handleCateChange"
          filterable>
        </el-cascader>
      </el-form-item>
      <el-form-item label="所属分组" prop="attrGroupType">
        <template>
          <el-select v-model="dataForm.attrGroupType" placeholder="请选择">
            <el-option
              v-for="item in attrGroupTypeOptions"
              :key="item.value"
              :label="item.attrGroupName"
              :value="item.attrGroupId">
            </el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item label="是否快速展示" prop="showDesc">
        <template slot-scope="scope">
          <el-switch
            v-model="dataForm.showDesc"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </template>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      props: {
        value: 'catId',
        label: 'name',
        children: 'children',
      },
      cateIdValues: [],
      cateOptions: [],
      valueSelect: [],
      attrTypeOptions: [
        {
          value: 0,
          label: '销售属性'
        },
        {
          value: 1,
          label: '基本属性'
        }
      ],
      attrGroupTypeOptions: [],
      visible: false,
      dataForm: {
        attrId: 0,
        attrName: '',
        searchType: '',
        valueType: '',
        icon: '',
        valueSelect: '',
        attrType: '',
        attrGroupType: '',
        enable: '',
        catelogId: '',
        showDesc: ''
      },
      dataRule: {
        attrName: [
          {required: true, message: '属性名不能为空', trigger: 'blur'}
        ],
        searchType: [
          {required: true, message: '是否需要检索[0-不需要，1-需要]不能为空', trigger: 'blur'}
        ],
        valueType: [
          {required: true, message: '值类型[0-为单个值，1-可以选择多个值]不能为空', trigger: 'blur'}
        ],
        icon: [
          {required: true, message: '属性图标不能为空', trigger: 'blur'}
        ],
        // valueSelect: [
        //   {required: true, message: '可选值列表[用逗号分隔]不能为空', trigger: 'blur'}
        // ],
        attrType: [
          {required: true, message: '属性类型[0-销售属性，1-基本属性不能为空', trigger: 'blur'}
        ],
        enable: [
          {required: true, message: '启用状态[0 - 禁用，1 - 启用]不能为空', trigger: 'blur'}
        ],
        catelogId: [
          {required: true, message: '所属分类不能为空', trigger: 'blur'}
        ],
        showDesc: [
          {required: true, message: '快速展示【是否展示在介绍上；0-否 1-是】，在sku中仍然可以调整不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    close () {
      this.visible = false
      this.cateIdValues = []
      this.valueSelect = []
      this.attrGroupTypeOptions = []
    },
    handleCateChange (value) {
      console.log(value[2])
      this.dataForm.catelogId = value[2]
      this.attrGroupTypeOptions = []
      this.dataForm.attrGroupType = ''
      this.$http({
        url: this.$http.adornUrl(`/gulimailproduct/attrgroup/list/${this.dataForm.catelogId}`),
        method: 'get',
        params: this.$http.adornParams({
          'page': 1,
          'limit': 10,
          'key': ''
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          console.log(data.page.list)
          this.attrGroupTypeOptions = data.page.list
        } else {
          this.$message({
            message: data.msg,
            type: 'error'
          })
        }
      }).catch(() => {
        this.$message({
          message: '未知异常',
          type: 'error'
        })
      })
    },
    getMenus () {
      this.$http({
        url: this.$http.adornUrl('/gulimailproduct/category/list/tree'),
        method: 'get',
      }).then(({data}) => {
        console.log('成功获取到数据。。', data.data)
        this.cateOptions = data.data
      })
    },
    findAncestors (targetCatId) {
      let result = []
      // eslint-disable-next-line one-var
      let a = 0, b = 0, c = 0
      for (let i = 0; i < this.cateOptions.length; i++) {
        a = this.cateOptions[i].catId
        for (let j = 0; j < this.cateOptions[i].children.length; j++) {
          b = this.cateOptions[i].children[j].catId
          for (let k = 0; k < this.cateOptions[i].children[j].children.length; k++) {
            c = this.cateOptions[i].children[j].children[k].catId
            if (c === targetCatId) {
              result.push(a)
              result.push(b)
              result.push(c)
              return result
            }
          }
        }
      }
      return result
    },
    init (id) {
      this.dataForm.attrId = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.attrId) {
          this.$http({
            url: this.$http.adornUrl(`/gulimailproduct/attr/info/${this.dataForm.attrId}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              console.log(data)
              this.dataForm.attrName = data.attr.attrName
              this.dataForm.searchType = data.attr.searchType
              this.dataForm.valueType = data.attr.valueType
              this.dataForm.icon = data.attr.icon
              this.dataForm.valueSelect = data.attr.valueSelect
              this.dataForm.attrType = data.attr.attrType
              this.dataForm.enable = data.attr.enable
              this.dataForm.showDesc = data.attr.showDesc
              this.valueSelect = data.attr.valueSelect.split(';')
              this.cateIdValues = data.attr.cateIdValues
              this.attrGroupTypeOptions = data.attr.pageUtils.list
              this.dataForm.catelogId = data.attr.catelogId
              this.dataForm.attrGroupType = data.attr.attrGroupType
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.dataForm.valueSelect = ''
          for (let i = 0; i < this.valueSelect.length - 1; i++) {
            this.dataForm.valueSelect = this.dataForm.valueSelect + this.valueSelect[i] + ';'
          }
          this.dataForm.valueSelect = this.dataForm.valueSelect + this.valueSelect[this.valueSelect.length - 1]
          console.log(this.dataForm)
          this.$http({
            url: this.$http.adornUrl(`/gulimailproduct/attr/${!this.dataForm.attrId ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'attrId': this.dataForm.attrId || undefined,
              'attrName': this.dataForm.attrName,
              'searchType': this.dataForm.searchType,
              'valueType': this.dataForm.valueType,
              'icon': this.dataForm.icon,
              'valueSelect': this.dataForm.valueSelect,
              'attrType': this.dataForm.attrType,
              'enable': this.dataForm.enable,
              'catelogId': this.dataForm.catelogId,
              'showDesc': this.dataForm.showDesc,
              'attrGroupType': this.dataForm.attrGroupType,
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  },
  created () {
    this.getMenus()
  }
}
</script>
